<template>
  <div>
    <!--   <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button> -->
    <!-- 导航菜单 -->
    <el-menu
      :collapse="itemx"
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <!-- 菜单一级 -->
      <el-submenu
        :index="item.id + '.'"
        v-for="(item, index) in list"
        :key="index"
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.authName }}</span>
        </template>
        <!-- 菜单二级 -->
        <el-menu-item
          :index="'/' + val.path"
          v-for="(val, ind) in item.children"
          :key="val.id + ind"
        >
          <i class="el-icon-setting"></i>
          <span slot="title">{{ val.authName }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  props: ["itemx"],
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    // 调用请求权限列表
    this.foodlist();
  },
  methods: {
    // 获取侧边 菜单数据
    foodlist() {
      this.$axios
        .get("https://www.liulongbin.top:8888/api/private/v1/menus")
        .then((rem) => {
          //   console.log(rem);
          // 提取返回的数据
          let { meta, data: list } = rem;
          if (meta.status == "200") {
            //   数据于模板绑定
            this.list = list;
            // console.log(this.list);
          }
        });
    },
  },
};
</script>
<style scoped>
.el-submenu {
  width: 100%;
}
</style>